<template>
  <view>
    <uni-file-picker limit="10" file-mediatype="all" ref="uploadBox" v-if="isHavePermissions"
                     @progress="progress"
                     @success="success"
                     @fail="fail"
                     :auto-upload="false"
                     @select="select">
      <button class="upload_btn"><i class="iconfont">&#xe67c;</i>{{ text }}</button>
    </uni-file-picker>
    <button class="upload_btn" @click.stop="checkPermissions" v-else><i class="iconfont">&#xe67c;</i>{{ text }}</button>
    <!-- 回显列表 -->
    <view v-if="fileList !== ''">
      <view class="show_file" v-for="item,index in fileList" :key="index">
        <view class="file-item">
          <!-- 图标显示 -->
          <i class="iconfont" style="color:#4482E0;font-size: 70rpx;" v-if="item.extname == 'doc'">&#xe65b;</i>
          <i class="iconfont" style="color:#4482E0;font-size: 70rpx;" v-if="item.extname == 'docx'">&#xe65a;</i>
          <i class="iconfont" style="color:#FA4E4E;font-size: 70rpx;" v-if="item.extname == 'pdf'">&#xe663;</i>
          <i class="iconfont" style="color:#1ADF74;font-size: 70rpx;" v-if="item.extname == 'xlsx'">&#xe666;</i>
          <i class="iconfont" style="color:#1ADF74;font-size: 70rpx;" v-if="item.extname == 'xls'">&#xe666;</i>
          <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'png'">&#xe665;</i>
          <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpg'">&#xe662;</i>
          <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpeg'">&#xe661;</i>
          <i class="iconfont" style="color:#FF8976;font-size: 70rpx;" v-if="item.extname == 0">&#xe65d;</i>
          <view style="padding:10rpx 20rpx 0 20rpx;">
            <view class="title">{{ item.name }}</view>
            <view class="result">
              <span> <i class="iconfont themeColor" style="font-size:24rpx;">&#xe615;</i>文档待安全加密，{{ statusname }}...</span>
              <span style="margin-left: 20rpx;" v-if="item.size">{{ (item.size / 1024).toFixed(2) }}kb</span>
              <!-- <span style="margin-left: 20rpx;" >{{statusname}}</span> -->
              <!-- <i class="iconfont" style="color:#00B42A;font-size:24rpx;margin-left:10rpx;"
                 v-if="item.status === 'success'">&#xe69e;</i> -->
            </view>
          </view>
          <view class="close" @click="removeMedical(item,index)">
            <i class="iconfont" style="font-size: 28rpx;">&#xe903;</i></view>
        </view>
      </view>
      <ul v-if="isShowPreview">
        <li>
          <button>预览</button>
        </li>
      </ul>
    </view>

  </view>
</template>

<script>
import {getToken} from "@/utils/auth";
import {delWordFile, getWordByContractId} from "@/api/ec/work/contract/contractFile";

export default {
  props: {
    value: [String, Object, Array],
    // 图片数量限制
    limit: {
      type: Number,
      default: 10,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    // 合同id
    contractId: {
      type: Number,
      default: 0,
    },
    // 合同类型
    contractTypeId: {
      type: Number,
      default: null,
    },
    // 业务分类
    businessTypeId: {
      type: Number,
      default: null,
    },
    // 是否有权限上传
    isHavePermissions: {
      type: Boolean,
      default: true,
    },
    // 是否显示预览
    isShowPreview: {
      type: Boolean,
      default: false,
    },
    uploadFileUrl: {
      type: String,
    },
    // 上传文件类型 1 合同模板word  2附件
    uploadType: {
      type: Number,
      default: 1,
    },
    text: {
      type: String,
    }
  },
  data() {
    return {
      size: '',
      statusname: '上传中',
      percentage: 0,
      fileList: [],
      fileId: '',
      isMood: false,
      fileType: 'html',
    };
  },
  created() {
    this.initData()
  },
  onShow(){
    console.log(this.fileList)
  },
  methods: {
    // 无权限点击按钮
    checkPermissions() {
      if (!this.contractTypeId || !this.businessTypeId) {
        this.$modal.msgError("请先选择合同类型或业务分类");
      } else {
        this.$modal.msgError("您无法在当前业务分类发起签约，请向管理员申请权限");
      }
    },
    initData() {
      getWordByContractId(this.contractId).then(res => {
        // this.fileList = res.data;
        this.statusname = '等待上传中'
        if (!!res.data) {
          this.$emit("getId", this.fileList);
        }
      })
    },
    // 确定
    async submitUpload() {
      // 预上传的文件list
      this.$emit("getId", this.fileList);
      // 回调上传了几个文件 显示
      this.$emit('changeValue', this.fileList.length);
    },
    // 刷新上传的列表
    refreshFileList(fileList) {
      // 操作删除回调
      this.fileList = fileList;
      this.$emit('changeValue', this.fileList.length);
    },
    // 这里的方法是请求最后一次
    debounce(fn, waits) {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.timer = setTimeout(() => {
        fn.apply(this, arguments); // 把参数传进去
      }, waits);
    },
    // 获取上传状态
    select(e) {
      this.$emit("getId", e.tempFiles);
      console.log('选择文件：', e, this.contractId)
      this.fileList.push(e.tempFiles[0])
      // this.fileLists.push({name:e.tempFiles[0].name,extname:e.tempFiles[0].extname,size:e.tempFiles[0].size})
      const tempFilePaths = e.tempFilePaths;
      this.debounce(this.submitUpload, 500);
      // for (var i = 0; i < tempFilePaths.length; i++) {
      //   const tempFile = e.tempFiles[i];
      //   if (tempFile.size >= '10*1024*1024') {
      //     this.$modal.msgError("您上传的文件过大，请检查或修改后，再上传！");
      //   }
      //   uni.showLoading({
      //     title: "上传中",
      //     mask: true,
      //   });
      //   uni.uploadFile({
      //     url: this.uploadFileUrl, // 上传合同模板文件
      //     header: {
      //       Authorization: "Bearer " + getToken(),
      //     },
      //     formData: {
      //       secretFlag: 'N',
      //       fileLocation: 5,
      //       contractId: this.contractId,
      //     },
      //     filePath: tempFilePaths[i],
      //     name: 'file',
      //     success: (uploadFileRes) => {
      //       this.fileId = JSON.parse(uploadFileRes.data).fileId
      //       // 获取上传合同模板的合同id
      //       uni.$emit("getContractIdEvent", {
      //         data: JSON.parse(uploadFileRes.data), number: this.fileLists.length
      //       })
      //       uni.hideLoading();
      //     },
      //     fail: () => {
      //       uni.hideLoading();
      //       uni.showToast("上传失败！")
      //     },
      //     complete: function () {
      //       uni.hideLoading();
      //     }
      //   });
      // }
    },
    // 删除文件
    removeMedical(file, index) {
      this.fileList.splice(index, 1)
      if (!!file.id) {
        delWordFile(file.id).then(res => {
          this.$modal.msgSuccess("删除成功");
        })
      }
      if (!!file.response) {
        delWordFile(file.response.fileId).then(res => {
          this.$modal.msgSuccess("删除成功");
        })
      }
      this.$emit('changeValue', this.fileList.length);
      this.$emit("delted", this.isMood);
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },
    // 上传成功
    success(e) {
      console.log('上传成功')
    },
    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    }
  },
};
</script>
<style lang="scss" scoped>
// 不显示原生list样式
::v-deep .uni-file-picker__lists {
  display: none;
}

.progressStyle {
  opacity: 0;
  animation-name: fadenum;
  animation-duration: 2s;
}

@keyframes fadenum {

  0% {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

// 进度条文字消失
::v-deep .el-progress__text {
  display: none;
}

.upload_btn {
  color: $uni-color-primary;
  width: 310rpx;
  font-size: 26rpx;
  margin-left: 0;
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid $uni-color-primary;

  &:hover {
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }

  .iconfont {
    font-size: 28rpx;
    margin-right: 5rpx;
  }
}

@keyframes cloudLeft {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.close {
  color: #86909c;
  position: absolute;
  right: 12rpx;
}

.show_file {
  position: relative;
  border-style: none;
  background: #F2F3F5;
  // border: 1rpx solid #cccccc;
  margin: 20rpx 0 20rpx 0;
  width: 680rpx;
  align-items: center;
  border-radius: 8rpx;
  overflow: hidden;
  animation: wrapper-gradient 1s linear;
  animation-name: cloudLeft;
  padding: 10rpx 40rpx 10rpx 20rpx;
  height: 100rpx;

  &:hover {
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }

  .file-item {
    display: flex;
    align-items: center;
  }

  .title {
    width: 100%;
    margin: 0;
    font-size: 28rpx;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1; //显示行数
    display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical; /*伸缩盒子的排列方式：从上到下垂直*/
    color: #666666;
    line-height: 30rpx;

  }

  .result {
    font-size: 24rpx;
    margin: 0;
    // padding-top:7rpx;
    color: #86909c;
    line-height: 34rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
